﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style>
<!--
.title{color:blue;}
.rem{color:#999;}
.inp{width:120px;}
-->
</style>



<!--必需引用：样式文件-->
<link type="text/css" rel="stylesheet" href="css/calendar.css" />
<!--必需引用：JS文件-->
<script type="text/javascript" src="js/calendar.js"></script>
</head>

<body>
<table border="1">
  <tr>
    <td colspan="3" style="font-size:12px;">
    <p><b><span style="color:red;font-size:14px;">主调函数</span></b><br />
       //inputField	: 承载输出值的input控件<br />
       //format		: 格式化字符串，如: &quot;yyyy-mm-dd hh:ii&quot;<br />
       //buttonObj		: 触发对话框的控件(依据此控件进行相对定位显示)<br />
       //displayTime	: 是否使用时间(小时、分),值为true或false，参数可略<br />
       //initVal		: 初始值(yyyy-mm-dd hh:ii)，参数可略<br />
       function <b><span style="color:blue;font-size:14px;">displayCalendar</span></b>(inputField,format,buttonObj,displayTime,initVal){<br />
       //...函数内容略<br />
       }<br />
     </p>
     </td>
  </tr>
  <tr>
    <td width="100" class="title">日期</td>
    <td width="200"><input type="text" id="txt1" name="txt1" class="inp" readonly="readonly" onclick="displayCalendar(this, 'yyyy-mm-dd', this);" /></td>
    <td width="350" class="rem">日期简单调用示例</td>
  </tr>
  <tr>
    <td class="title">日期</td>
    <td><input type="text" id="txt2" name="txt2" class="inp" readonly="readonly" onclick="displayCalendar(this, 'yyyy-mm-dd', this, false, '');" /></td>
    <td class="rem">日期完整调用完整参数示例</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="title">日期和时间</td>
    <td><input type="text" id="txt3" name="txt3" class="inp" readonly="readonly" onclick="displayCalendar(this, 'yyyy-mm-dd hh:ii', this, true, '');" /></td>
    <td class="rem">日期时间调用示例</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="title">设定初始值</td>
    <td><input type="text" id="txt4" name="txt4" class="inp" readonly="readonly" onclick="displayCalendar(this, 'yyyy-mm-dd hh:ii', this, true, '1980-03-13 01:55');" /></td>
    <td class="rem">给定初始值为“1980-03-13 01:55”</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="title">输入框与按钮</td>
    <td>
    	<input type="text" id="txt5" name="txt5" class="inp" readonly="readonly" />
        <input type="button" id="btn5" name="btn5" style="width:50px;" value="选择" onclick="displayCalendar(document.getElementById('txt5'), 'yyyy-mm-dd hh:ii', this, true, '');" />
    </td>
    <td class="rem">输入框与按钮</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
